<template>
	 <div class="wrapper">
	            <!-- header部分 -->
	            <header>
	                <p>在线支付</p>
	            </header>
	            <!-- 订单信息部分 -->
	            <h3>订单信息：</h3>
	            <div class="order-info">
	                <p>
	                    {{order.business.businessName}}
	                    <i class="fa fa-caret-down" id="showBtn" @click="showBtn"></i>
	                </p>
	                <p>&#165;{{order.orderTotal}}</p>
	            </div>
	            <!-- 订单明细部分 -->
	            <ul class="order-detailet" id="detailetBox" v-show="isShow">
	                <li v-for="f in order.list" :key="f.foodId">
	                    <p>{{f.food.foodName}} x {{f.quantity}}</p>
	                    <p>&#165;{{f.food.foodPrice}}</p>
	                </li>
	                <li>
	                    <p>配送费</p>
	                    <p>&#165;{{order.business.deliveryPrice}}</p>
	                </li>
	            </ul>
	            <!-- 支付方式部分 -->
	            <ul class="payment-type">
	                <li>
	                    <img src="../assets/alipay.png">
	                    <i class="fa fa-check-circle"></i>
	                </li>
	                <li>
	                    <img src="../assets/wechat.png">
	                </li>
	            </ul>
	            <div class="payment-button">
	                <button>确认支付</button>
	            </div>
	            	<!-- 底部菜单部分 -->
	            		<Footer></Footer>
	        </div>    
</template>

<script>
	import Footer from '../components/Footer.vue';
	
		export default {
			name: 'Payment',
			components: {
				Footer
			},
			data(){
				return{
					orderId: this.$route.query.orderId,
					order: {
						business:{
							businessName:''
						},
						list:[
							{
								food:{}
							}
						]
					},
					isShow: false
				}
			},
			created(){
				if(this.orderId == undefined){
					this.$router.push('/index');
				}
				console.log(this.orderId);
				this.getOrdersById();
			},
			// 生成订单后,迫使用户进入首页,无法再生成订单
			mounted(){
				let that = this;
				// 当页面载入时,把当前页面的地址添加到history
				history.pushState(null,null,document.URL);
				// window时浏览器对象,此处的事件绑定是一个全局性的设置
				window.onpopstate = function(){
					// window函数里的this指代window对象,而非vue
					that.$router.push('/index');
				}
			},
			// 点击历史记录回退后,会从此页面切换到其他页面
			// 此页面组件将发生销毁事件
			destroyed:function(){
				//利用组件销毁事件发生,接触浏览器的onpopstate事件函数绑定
				window.onpopstate=null;

			},
			methods:{
				async getOrdersById(){
					let url = 'OrdersController/getOrdersById?orderId='+this.orderId;
					let {data} = await this.$axios.get(url);
					// console.log(data);
					this.order = data;
				},
				// 是否显示商品详情
				showBtn(){
					this.isShow = !this.isShow;
				}
			}
		}
</script>

<style scoped="scoped">
	/****************** 总容器 ******************/
	.wrapper{
	    width: 100%;
	    height: 100%;
	}
	/****************** header部分 ******************/
	.wrapper header{
	    width: 100%;
	    height: 12vw;
	    background-color: #0097FF;
	    color: #fff;
	    font-size: 4.8vw;
	    position: fixed;
	    left: 0;
	    top: 0;
	    z-index: 1000;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	/****************** 订单信息部分 ******************/
	.wrapper h3{
	    margin-top: 12vw;
	    box-sizing: border-box;
	    padding: 4vw 4vw 0;
	    font-size: 4vw;
	    font-weight: 300;
	    color: #999;
	}
	.wrapper .order-info{
	    box-sizing: border-box;
	    padding: 4vw;
	    font-size: 4vw;
	    color: #666;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.wrapper .order-info p:last-child{
	    color: orangered;
	}
	/****************** 订单明细部分 ******************/
	.wrapper .order-detailet{
	    width: 100%;
	}
	.wrapper .order-detailet li{
	    width: 100%;
	    box-sizing: border-box;
	    padding: 1vw 4vw;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.wrapper .order-detailet li p{
	    font-size: 3vw;
	    color: #666;
	}
	/****************** 支付方式部分 ******************/
	.wrapper .payment-type{
	    width: 100%;
	}
	.wrapper .payment-type li{
	    width: 100%;
	    box-sizing: border-box;
	    padding: 4vw;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.wrapper .payment-type li img{
	    width: 33vw;
	    height: 8.9vw;
	}
	.wrapper .payment-type li .fa-check-circle{
	    font-size: 5vw;
	    color: #38CA73;
	}
	.wrapper .payment-button{
	    width: 100%;
	    box-sizing: border-box;
	    padding: 4vw;
	}
	.wrapper .payment-button button{
	    width: 100%;
	    height: 10vw;
	    border: none;
	    /*去掉外轮廓线*/
	    outline: none;
	    border-radius: 4px;
	    background-color: #38CA73;
	    color: #fff;
	}
	
</style>
